// 引入vue
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入主页面
import AboutView from '../views/AboutView.vue'

// 注册
Vue.use(VueRouter)

const routes = [
  // 主页面
  {
    path: '/', //路由路径
    name: 'home', //路由名称
    // 设置路由页面
    component: AboutView,
    children: [
      // {
      //   path: '/rights', //路由路径
      //   name: 'rights', //路由名称
      //   // 设置路由页面
      //   component: () => import('../views/rights.vue'),
      // },
      // // 用户列表页面路由
      // {
      //   path: '/users', //路由路径
      //   name: 'users', //路由名称
      //   // 设置路由页面
      //   component: () => import('../views/users.vue'),
      // },
      // // 角色列表页面路由
      // {
      //   path: '/Roles', //路由路径
      //   name: 'Roles', //路由名称
      //   // 设置路由页面
      //   component: () => import('../views/Roles.vue'),
      // },
      // // 商品分类页面路由
      // {
      //   path: '/categories', //路由路径
      //   name: 'cate', //路由名称
      //   // 设置路由页面
      //   component: () => import('../views/goods/Cate.vue'),
      // },
      // // 分类参数页面路由
      // {
      //   path: '/params', //路由路径
      //   name: 'Params', //路由名称
      //   // 设置路由页面
      //   component: () => import('../views/goods/Params.vue'),
      // },
      // // 商品列表页面路由
      // {
      //   path: '/goods', //路由路径
      //   name: 'Goods', //路由名称
      //   // 设置路由页面
      //   component: () => import('../views/goods/Goods.vue'),
      // },
      // // 添加商品
      // {
      //   path: '/add', //路由路径
      //   name: 'add', //路由名称
      //   // 设置路由页面
      //   component: () => import('../views/goods/Add.vue'),
      // },
      // // 图表
      // {
      //   path: '/reports', //路由路径
      //   name: 'reports', //路由名称
      //   // 设置路由页面
      //   component: () => import('../views/Echarts.vue'),
      // },

      {
        path: '/login',
        name: 'Login',
        component: Login
      },
      //测试页面
      {
        path: '/test',
        name: 'Test',
        component: () =>
          import(/* webpackChunkName: "Test" */ '@/views/Test.vue')
      },
      //模拟按钮权限
      {
        path: '/menu',
        name: 'Menu',
        component: () =>
          import(/* webpackChunkName: "Menu" */ '@/views/Menu.vue')
      },
      //找不到页面到都到login
      {
        path: '*',
        redirect: '/login'
      }
    ]
  },
  // about页面路由
  {
    path: '/about', //路由路径
    name: 'about', //路由名称
    // 设置路由页面
    component: () => import('../views/AboutView.vue')
  },
  // 登录页面路由
  {
    path: '/login', //路由路径
    name: 'login', //路由名称
    // 设置路由页面
    component: () => import('../views/Login.vue')
  }
]
// 路由实例化
const router = new VueRouter({
  routes
})
// router.beforeEach((to, from, next) => {
//   if (sessionStorage.getItem('token')) {
//     next()
//   } else {
//     if (to.path == '/login') {
//       next()
//     } else {
//       next('/login')
//     }
//   }
// })

import { fn } from '@/utils/routeList.js' //把生成列表路由放到公共方法里
//生成动态路由-登录后获取到路由列表，调用递归函数通过router.addRoute('组件名',值)生成动态路由
console.log('路由先走')
function loadRoute() {
  let token = localStorage.getItem('token')
  let menusList = JSON.parse(localStorage.getItem('menusList'))
  //注意此处是登录后,有了左侧导航数据，再进行路由表动态加载
  if (token && menusList) {
    let newList = fn(menusList)
    console.log('路由表结构', newList)
    newList.forEach((item) => {
      router.addRoute('Home', item)
    })
  }
}
//!!!注意此处在次调用1次动态路由,为了防止登录后跳转其它页面,刷新页面找不到问题。第2点注意，要在路由实例化后调用执行。
loadRoute()

// 白名单-意思是不需要token，就可直接进入的页面
const whiteList = ['/login', '/test', '/menu']

//路由拦截-1.先看看有没有登录过token值，如果登录过放行 2.没有登录在次判断是否在登录页面

router.beforeEach((to, from, next) => {
  //有token或没token
  let token = localStorage.getItem('token')
  //有token放行
  if (token) {
    next()
  }
  //注意这里没token又分2种情况 1.在登录页/或者其它不不需要token页面放行 2.否则去登录页
  else {
    // if(to.path=="/login"){
    if (whiteList.indexOf(to.path) != -1) {
      next()
    } else {
      next('/login')
    }
  }
})

// 导出路由
export default router
